@bagcolor: hsl(205, 87%, 57%);
@bag_font_color: #b9b0b0;
@active_font: #30A0F1;
@head_font_color: rgb(255, 255, 255);

.out_warp {
  // color: @bag_font_color;
  background-image: url('../../assest/images/timg.jpg');

  .bot_warp {
    width: 70%;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
    margin-top: 50px;

    div {
      display: flex;
      flex-direction: column;

      strong {
        margin-top: 10px;
        color: black;
        font-size: 0.7rem;
      }

      .select_color {
        color: @bagcolor;
      }
    }
  }

  .head_title {
    background-color: @bagcolor;
    color: @head_font_color;
    height: 40px;
    font-size: 1.2rem;
    line-height: 40px;
  }

  .mid_warp {
    h3 {
      margin-top: 30px;

      img {
        border-radius: 40px;
        width: 100px;
        height: 100px;
        box-shadow: -3px 9px 12px 2px #eee;
      }
    }

    .tab_two {
      margin: 40px auto;
      width: 68%;
      display: flex;
      color: @bag_font_color;
      height: 36px;
      line-height: 36px;

      :nth-child(1) {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
      }

      :last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      .tab_item {
        flex: 1;
        font-weight: 400;
        border: 2px solid #eee;
      }

      .active_css {
        border-bottom: 2px solid @active_font;
        color: @bag_font_color;
        background-color: @bagcolor;
      }
    }
  }
}

.form_login,
.from_register {
  form {
    width: 270px;
    margin: 0px auto;

    .forget_mima {
      text-align: right;
      font-size: 0.8rem;
      margin-top: -5px;
      margin-bottom: 20px;
    }

    .btn {
      background-color: @bagcolor;
      border-radius: 40px;
      width: 100%;
      height: 40px;
      font-size: 1.2rem;
      color: @bag_font_color;
      border: 0;
    }

    .btn_send {
      background-color: #dfd8d8;
      border-radius: 10px;
      height: 30px;
      width: 100px;
      margin-left: 20px;
      font-size: 0.6rem;
      color: @bag_font_color;
      border: 0;
    }

    .input_item {
      display: flex;
      width: 100%;
      margin: 30px auto;
      align-items: center;
      margin-left: -10px;

      i {
        color: @active_font;
        font-size: 20px;
        position: relative;
        left: 24px;
      }

      input {
        padding-left: 30px;
        width: 100%;
        height: 40px;
        font-size: 0.8rem;
        border-bottom: 2px solid rgba(238, 238, 238, 1);

        background: rgba(0, 0, 0, 0);
        // border: 1px solid rgba(0, 0, 0, 0.1);
      }

      input:focus {
        outline: none;
        border-bottom: 2px solid skyblue;
      }
    }
  }
}